<template>
  <div class="content-box" :class="{ 'main-full-statis': fullWindow }">
    <div class="content-header">
      <div class="content-left">
        <div
          :class="{
            'content-item-select': curContentType === contentFlow,
            'content-item': curContentType !== contentFlow,
          }"
          @click="handleSwitchContent(contentFlow)"
        >
          流程(<span>{{ flowWaitCount }}</span
          >)
        </div>
        <div
          :class="{
            'content-item': curContentType !== contentNotify,
            'content-item-select': curContentType === contentNotify,
          }"
          @click="handleSwitchContent(contentNotify)"
        >
          通知(<span>{{ notifyUnread }}</span
          >)
        </div>
        <!-- <div
          class="content-item"
          :class="{ 'content-item-select': curContentType === contentMicromail }"
          @click="handleSwitchContent(contentMicromail)"
        >
          微邮(94)
        </div>
        <div
          class="content-item"
          :class="{ 'content-item-select': curContentType === contentNote }"
          @click="handleSwitchContent(contentNote)"
        >
          批注(99+)
        </div> -->
      </div>
      <div class="content-right" @click="handleWindow">
        <i
          :class="{ 'fal fa-arrows-maximize': !fullWindow, 'fal fa-arrows-minimize': fullWindow }"
        ></i>
      </div>
    </div>
    <div v-if="curContentType === contentFlow">
      <flow-main />
    </div>
    <div v-if="curContentType === contentNotify">
      <notify-main />
    </div>
    <div v-if="curContentType === contentMicromail">
      <micromail-main />
    </div>
    <div v-if="curContentType === contentNote">
      <note-main />
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onBeforeUnmount, onMounted, ref } from 'vue';
  import FlowMain from '@/views/board-home/components/flow-main.vue';
  import NotifyMain from '@/views/board-home/components/notify-main.vue';
  import MicromailMain from '@/views/board-home/components/micromail-main.vue';
  import NoteMain from '@/views/board-home/components/note-main.vue';
  import {
    HOME_CONTENT_FLOW,
    HOME_CONTENT_NOTIFY,
    HOME_CONTENT_MICROMAIL,
    HOME_CONTENT_NOTE,
    HOME_NOTIFY_UNREAD_COUNT,
    HOME_FLOW_EVENT_COUNT,
  } from '@/helper/constant';
  import { getCurrentUser } from '@jecloud/utils';
  import VueEvent from '@/helper/event';
  import { GetLoadUserMsg } from '@/api';
  export default defineComponent({
    name: 'ContentMain',
    components: { FlowMain, NotifyMain, MicromailMain, NoteMain },
    props: {
      type: String,
    },
    setup() {
      let fullWindow = ref(false); //是否放大屏幕操作
      const state = reactive({
        curContentType: HOME_CONTENT_FLOW, //当前内容类型
        contentFlow: HOME_CONTENT_FLOW, //流程
        contentNotify: HOME_CONTENT_NOTIFY, //通知
        contentMicromail: HOME_CONTENT_MICROMAIL, //微邮
        contentNote: HOME_CONTENT_NOTE, //批注
        maxCount: 99, //内容显示最大数量
        notifyUnread: 0, //通知消息未读数量
        flowWaitCount: 0, //流程数量
        notifyPageData: {
          userId: getCurrentUser()?.id, //用户id
          deptId: getCurrentUser()?.organization.id, //部门id
          msgType: '', //通知消息分类
          readStatus: '0', // 消息已读状态 0未读 1已读
          startTime: '', //开始时间
          endTime: '', //结束时间
          keyword: '', //关键字
          tableCode: 'JE_SYS_USERMSG',
          page: 1, //页数
          limit: 30, //每页限制条数
        },
      });
      const methods = {
        handleWindow() {
          //窗口放大/还原
          fullWindow.value = !fullWindow.value;
          // showModal({ type: 'MSG' });
        },
        handleSwitchContent(contentType) {
          //切换内容
          state.curContentType = contentType;
        },
        watchNoticeUnreadCount(unreadCount) {
          //监听通知消息未读数量
          if (unreadCount <= state.maxCount) {
            state.notifyUnread = unreadCount;
          } else {
            state.notifyUnread = state.maxCount + '+';
          }
        },
        watchFlowCount(flowCount) {
          //监听流程数量变化
          if (flowCount <= state.maxCount) {
            state.flowWaitCount = flowCount;
          } else {
            state.flowWaitCount = state.maxCount + '+';
          }
        },
        loadNotifyData() {
          //加载通知新未读总数量
          GetLoadUserMsg(state.notifyPageData).then((res) => {
            if (res.code == 1000 && res.success) {
              const resData = res.data;
              state.notifyUnread = resData.noReadCount;
            }
          });
        },
      };
      onMounted(() => {
        methods.loadNotifyData();
        VueEvent.on(HOME_NOTIFY_UNREAD_COUNT, methods.watchNoticeUnreadCount);
        VueEvent.on(HOME_FLOW_EVENT_COUNT, methods.watchFlowCount);
      });
      onBeforeUnmount(() => {
        VueEvent.off(HOME_NOTIFY_UNREAD_COUNT);
        VueEvent.off(HOME_FLOW_EVENT_COUNT);
      });
      return {
        fullWindow,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .content-box {
    width: 100%;
    padding: 0 20px 20px;
    border-radius: 4px;
    background-color: #ffffff;
    .content-header {
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .content-left {
        display: inline-flex;
        align-items: center;
        .content-item {
          margin-right: 30px;
          font-size: 14px;
          color: #3f3f3f;
          cursor: pointer;
        }
        .content-item:hover {
          color: @primary-color;
        }
        .content-item-select {
          margin-right: 30px;
          font-size: 18px;
          font-weight: bold;
          border-bottom: 2px solid @primary-color;
          cursor: pointer;
        }
      }
      .content-right {
        cursor: pointer;
        i {
          font-size: 14px;
          color: #8d98ab;
        }
      }
    }
  }
  .main-full-statis {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0px;
    z-index: 90;
  }
</style>
